<template>
  <!-- 医生特有字段 -->
  <view class="doctor-fields">
    <view class="input-group">
      <view class="input-label">年龄</view>
      <input class="input" type="number" :value="doctorAge" @input="onAgeChange" placeholder="请输入年龄" maxlength="3" />
    </view>
    
    <view class="input-group">
      <view class="input-label">性别</view>
      <radio-group class="gender-radio-group" @change="onGenderChange">
        <label class="gender-radio"><radio value="male" :checked="doctorGender === 'male'" /> 男</label>
        <label class="gender-radio"><radio value="female" :checked="doctorGender === 'female'" /> 女</label>
      </radio-group>
    </view>
    
    <view class="input-group">
      <view class="input-label">医院</view>
      <input class="input" type="text" :value="hospital" @input="onHospitalChange" placeholder="请输入所在医院" maxlength="50" />
    </view>
    
    <view class="input-group">
      <view class="input-label">科室</view>
      <input class="input" type="text" :value="department" @input="onDepartmentChange" placeholder="请输入所在科室" maxlength="30" />
    </view>
    
    <view class="input-group">
      <view class="input-label">职位</view>
      <input class="input" type="text" :value="position" @input="onPositionChange" placeholder="请输入职位" maxlength="30" />
    </view>
  </view>
</template>

<script>
export default {
  name: 'DoctorForm',
  props: {
    hospital: {
      type: String,
      default: ''
    },
    department: {
      type: String,
      default: ''
    },
    position: {
      type: String,
      default: ''
    },
    doctorAge: {
      type: Number,
      default: 0
    },
    doctorGender: {
      type: String,
      default: 'male'
    }
  },
  methods: {
    onGenderChange(e) {
      this.$emit('gender-change', e.detail.value);
    },
    onAgeChange(e) {
      this.$emit('update:doctorAge', Number(e.detail.value));
    },
    onHospitalChange(e) {
      this.$emit('update:hospital', e.detail.value);
    },
    onDepartmentChange(e) {
      this.$emit('update:department', e.detail.value);
    },
    onPositionChange(e) {
      this.$emit('update:position', e.detail.value);
    }
  }
};
</script>

<style scoped>
.doctor-fields {
  padding: 10rpx 0;
}
</style>